<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Study React</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="test"></div>
    <pre>
        页面初次加载: 
        只会执行：constructor, componentWillMount, render, componentDidMount
        除了render, 其它的都只是调用一次而已；
    </pre>
    
    <script type="text/babel">
        class Demo extends React.Component {
            constructor(props) {
                super(props);
                console.log("constructor...");
            }

            componentWillMount() {
                console.log("componentWillMount...");
            }

            componentDidMount() {
                console.log("componentDidMount...");
                // setInterval(this.add, 1000)
            }

            componentWillUnmount() {
                console.log("componentWillUnmount...");
            }

            state = { count: 0 };

            add = () => {
                let count = this.state.count;
                this.setState({ count: count + 1 });
            }

            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById("test"));
            }

            
            render() {
                console.log("render...");
                let count = this.state.count;
                // Maximum update depth exceeded
                // 不能setState in (render, componentWillUpdate, componentDidUpdate)
                // this.setState({ count: count + 1 });

                return <div>
                    <div>Count: {count}</div>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>销毁组件</button>
                </div>
            }
        }

        ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
</body>

</html>